<!DOCTYPE html>
<html>
    <head>
        <title>Editor Test</title>
        <script src="//cdnjs.cloudflare.com/ajax/libs/jquery/2.0.2/jquery.min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/underscore.js/1.4.4/underscore-min.js"></script>
        <script src="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/js/bootstrap.min.js"></script>
        <script src="../external/codemirror.js"></script>
        <script src="../editor.js"></script>
        <script src="../external/codemirror-extensions.js"></script>
        <script src="../modes/uasm.js"></script>
        <script src="../modes/tsim.js"></script>
        <script src="../modes/jsim.js"></script>
        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/codemirror/3.12.0/codemirror.min.css">
        <link rel="stylesheet" type="text/css" href="//cdnjs.cloudflare.com/ajax/libs/twitter-bootstrap/2.3.2/css/bootstrap.min.css">
        <link rel="stylesheet" type="text/css" href="../external/codemirror-extensions.css">
        <style type="text/css">
            .tab-pane {
                border-bottom: 1px solid #ddd;
                border-left: 1px solid #ddd;
                border-right: 1px solid #ddd;
            }
            .nav-tabs {
                margin-bottom: 0;
            }
        </style>
    </head>
    <body>
        <div class="container">
            <div class="masthead">
                <h1>Editor Test</h1>
            </div>
            <div id="editor-test"></div>
        </div>
        <script type="text/javascript">
            // Make an editor
            var editor = new Editor('#editor-test', 'jsim');
            // Add some buttons to it
            editor.addButtonGroup([new ToolbarButton('Run', _.identity, 'Runs your program!'), new ToolbarButton('Export')]);
            editor.addButtonGroup([new ToolbarButton('Clear Errors', function() {
                editor.clearErrors();
            })]);
            // And a couple of tabs.
            editor.openTab('foo.uasm', 'This is a file!');
            editor.openTab('bar.uasm', 'This is a file, too.\n\nBeeep\n\nBeep');
            editor.openTab('active.tsim', 'tmsim demo tab');
            editor.markErrorLine('bar.uasm', "Beep has only two 'e's", 2, 0);
            var set_height = function() {
                editor.setHeight(document.documentElement.clientHeight - 70); // Set height to window height minus title.
            }
            set_height();
            $(window).resize(set_height); // Update the height whenever the browser window changes size.
        </script>
    </body>
</html>
